<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/pageUtils/template.xhtml">

	<ui:define name="body">
		<h:form>

			<p:panel header="Masks">
				<h:panelGrid columns="2" cellpadding="5">
					<h:outputText value="Date: " />
					<p:inputMask value="#{maskController.date}" mask="99/99/9999" />

					<h:outputText value="Phone: " />
					<p:inputMask value="#{maskController.phone}" mask="(999) 999-9999" />

					<h:outputText value="Phone with Ext: " />
					<p:inputMask value="#{maskController.phoneExt}"
						mask="(999) 999-9999? x99999" />

					<h:outputText value="taxId: " />
					<p:inputMask value="#{maskController.taxId}" mask="99-9999999" />

					<h:outputText value="SSN: " />
					<p:inputMask value="#{maskController.ssn}" mask="999-99-9999" />

					<h:outputText value="Celular :" />
					<p:inputText id="celular"
						value="#{eleitorController.eleitor.celular}" maxlength="10"
						mask="(99) 999-9999" />

					<p:commandButton value="Reset" type="reset" />
					<p:commandButton value="Submit" update="display" oncomplete="dialog.show()" />

				</h:panelGrid>
			</p:panel>

			<p:dialog widgetVar="dialog" modal="true">
				<h:panelGrid id="display" columns="2" cellpadding="5">

					<h:outputText value="Date: " />
					<h:outputText value="#{maskController.date}" />

					<h:outputText value="Phone: " />
					<h:outputText value="#{maskController.phone}" />

					<h:outputText value="Phone with Ext: " />
					<h:outputText value="#{maskController.phoneExt}" />

					<h:outputText value="taxId: " />
					<h:outputText value="#{maskController.taxId}" />

					<h:outputText value="SSN: " />
					<h:outputText value="#{maskController.ssn}" />

					<h:outputText value="Product Key: " />
					<h:outputText value="#{maskController.productKey}" />

				</h:panelGrid>
			</p:dialog>

		</h:form>
	</ui:define>
</ui:composition>